<!DOCTYPE html>
<html>
<head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/jquery-ui-1.12.1.custom/jquery-ui.theme.min.css"/>
    <link rel="stylesheet" href="/jquery-ui-1.12.1.custom/jquery-ui.structure.min.css"/>
    <link rel="stylesheet" href="/jquery-ui-1.12.1.custom/jquery-ui.min.css"/>
    <link rel="stylesheet" href="/jquery-ui-1.12.1.custom/jquery-ui.css"/>
    <link rel="stylesheet" href="/css/ui.jqgrid-bootstrap.css"/>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript" src="/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script> 
	<script src="/js/util.js"></script>
	<script type="text/javascript" src="/js/grid.locale-cn.js"></script>
	<script src="/js/jquery.jqGrid.js"></script>
	
	<style type="text/css">
		.ui-jqgrid .ui-jqgrid-htable .ui-th-div {
		    height: 17px;
		    margin-top: 5px;
		    text-align: center;
		}
	</style>
</head>
<body>

<div id="app" class="container">
	<div class="panel panel-default">
        <div class="panel-heading text-center">
			<h2>User List  JQgrid</h2>
		</div>
		<div id="order_table_div" class="panel-body"></div>
		<div id="dialog" title="Feature not supported" style="display:none">
			<p>That feature is not supported.</p>
		</div>
		
		<div id="dialogSelectRow" title="Warning" style="display:none">
			<p>请选择行！</p>
		</div>
		
		<div class="panel-footer">
			<a href="http://localhost/exportExcel">导出Excel</a>
		</div>
    </div>
 
</div>
<script>
$(function(){
	//第二种方式的表格展示
	(function initUserTable(){
		$.jgrid.defaults.width = 780;
		$.jgrid.defaults.responsive = true;
		$.jgrid.defaults.styleUI = 'Bootstrap';
		$("#order_table_div").empty().html('<table id="order_table" class="table table-hover "  width="100%"></table><div id="pager" style="height:30px;"></div>');
		var $table = $("#order_table");
		var settings = {}
		var userColModel = [
	        { label: 'ID', name: 'orderId', width: 200, align:'center',editable:false,editoptions:{readonly:true,size:10}, hidden:true},
	        { label: '产品名称', name: 'produceName', width: 300, align:'center', editable:true, editrules:{required:true}, editoptions:{size:20}},
	        { label: '生产日期', name: 'productDate',width:100, align:'center',formatter:function(cellValue, options, rowObject){
	        	return new Date(cellValue).pattern("yyyy-MM-dd");
	        }, editable:true, editrules:{required:true}, editoptions:{size:20}},
	        { label: '保质期', name: 'qualityGuaranteePeriod',width:100, align:'center',formatter:function(cellValue, options, rowObject){
	        	return new Date(cellValue).pattern("yyyy-MM-dd");
	        }, editable:true, editrules:{required:true}, editoptions:{size:20}},
	        { label: '库存', name: 'stockAmount', width: 100, align:'center', editable:true, editrules:{required:true}, editoptions:{size:20}},
	        //aaa 是虚构的
	        { label: '操作', sortable: false, name: 'aaa', width: 150 ,align:'center',
	        	formatter: function(cellValue, options, rowObject)
	        	{
	            	return '<a class="success-info" onclick="window.operate('+options.rowId+','+rowObject.orderId+')" >操作'+rowObject.orderId+'</a>';
	        	},
	        	editable:false, editrules:{required:false}, editoptions:{size:20}
	        }
	    ];
		$table.jqGrid({
	        url: '/loadProducts',
	        mtype: "POST",
	        postData:settings,
	        datatype: "json",
	        colModel: userColModel,
	        rowNum: 5,
	        shrinkToFit: false,
	        viewrecords: true,
	        gridview: true,
	        sortable:false,
	        width:1020,
	        height:200,
	    	page: 1,
			scroll: 1,
	        loadui: "Disable",
	        sortname:'orderId',
	        sortorder:'asc',
	        recordtext : "记录 {0} ~ {1} | 总记录数 {2}",//显示记录数的格式
	        emptyrecords : "",//空记录时的提示信息
	        pgtext : "{0}/{1}",//页数显示格式
	        pager: "#pager",
	        rownumbers: true, //可自动在表格前面添加序号
	        rownumWidth:50,
	        caption: "<h2><b>滚动鼠标加载数据</b></h2>",
	        loadonce: false,
	        jsonReader: {
	        	root:'rows',
	        	page:'page',
	        	total:'total',
	        	records:'records',
	        	repeattimes:false,
	        	cell:'cell',
	        	id:'orderId'
	        }
	    });
	
		//添加行号
		
	    $table.jqGrid('setLabel', 'rn', '序号', {'text-align':'center','vertical-align': 'center'}, {'title':'序号'});
	    for (var i = 0; i < userColModel.length; i++) {
	        var model = userColModel[i];
	        $table.jqGrid('setLabel', model.name, model.label, {'text-align' : 'center' }, {'title':model.label});
	    }
	    
	    //添加操作的按钮
	    
	    $table.jqGrid('navGrid','#pager',
				{edit:false,add:false,del:false,search:true},
				{ },
		        { },
		        { }, 
				{ 
			    	sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
			        closeOnEscape: true, 
			        multipleSearch: true, 
			        closeAfterSearch: true 
			    }
		);
			
		$table.navButtonAdd('#pager', {
			caption:"Add", 
			buttonicon:"ui-icon-plus", 
			onClickButton: addRow,
			position: "last", 
			title:"添加记录", 
			cursor: "pointer"
		});
		
		$table.navButtonAdd('#pager',  {
			caption:"Edit", 
			buttonicon:"ui-icon-pencil", 
			onClickButton: editRow,
			position: "last", 
			title:"修改记录", 
			cursor: "pointer"
		});
		
		$table.navButtonAdd('#pager', {
			caption:"Delete", 
			buttonicon:"ui-icon-trash", 
			onClickButton: deleteRow,
			position: "last", 
			title:"删除记录", 
			cursor: "pointer"
		});
		$("#btnFilter").click(function(){
			$table.jqGrid('searchGrid', {multipleSearch: false,  sopt:['eq']});
		});
		// Toolbar Search
		//$table.jqGrid('filterToolbar',{stringResult: true,searchOnEnter : true, defaultSearch:"cn"});
	    
	})();
});

function deleteRow(){
	var $table = $("#order_table");
	var row = $table.jqGrid('getGridParam', 'selrow');
	if(row != null){
		$table.jqGrid('delGridRow', row, {
			url:'/modifyProduct',
			recreateForm:true,
			beforeShowForm:function(form){
				$('.delmsg').replaceWith('<span style="white-space:pre;">Delete selected recored? </span>');
				$('#pData').hide();
				$('#nData').hide();
			},
			reloadAfterSubmit:false,
			closeAfterDelete:true,
			afterSubmit:function(response,postdata){
				var result = eval('('+response.responseText+')');
				var errors ="";
				if(result.success == false){
					for(var i=0; i<result.message.length; i++){
						errors+=result.message[i]+"<br/>";
					}
				}else{
					$('#dialog').text('删除行成功');
					$('#dialog').dialog({
						titile:'Success',
						modal:true,
						buttons:{
							"Ok":function(){
								$(this).dialog('close');
							}
						}
					});
				}
				return [result.success, errors, null]
			}
		});
	}else{
		$( "#dialogSelectRow" ).dialog();
	}
	
}
function editRow(){
	var $table = $("#order_table");
	var row = $table.jqGrid('getGridParam', 'selrow');
	if(null != row){
		$table.jqGrid('editGridRow', row, {
			url:'/modifyProduct',
			editData:{},
			recreateForm:true,
			beforeShowForm:function(form){},
			closeAfterEdit:true,
			reloadAfterSubmit:false,
			afterSubmit: function(response, postdata){
				var result = eval('('+response.responseText+')');
				var errors ="";
				if(result.success == false){
					for(var i=0; i<result.message.length; i++){
						errors+=result.message[i]+"<br/>";
					}
				}else{
					$('#dialog').text('行修改成功');
					$('#dialog').dialog({
						titile:'Success',
						modal:true,
						buttons:{
							"Ok":function(){
								$(this).dialog('close');
							}
						}
					});
				}
				return [result.success, errors, null]
			}
		});
	}else{
		$( "#dialogSelectRow" ).dialog();
	}
}
function addRow(){
	var $table = $("#order_table");
	$table.jqGrid('editGridRow', 'new', {
		url:'/modifyProduct',
		editData:{id:null},
		recreateForm:true,
		beforeShowForm:function(form){},
		closeAfterAdd:true,
		reloadAfterSubmit:false,
		afterSubmit:function(response, postdata){
			var result = eval('('+response.responseText+')');
			var errors ="";
			if(result.success == false){
				for(var i=0; i<result.message.length; i++){
					errors+=result.message[i] +"<br/>";
				}
			}else{
				$('#dialog').text('行记录添加成功！');
				$('#dialog').dialog({
					titile:'Success',
					modal:true,
					buttons:{
						"Ok":function(){
							$(this).dialog('close');
						}
					}
				});
			}
			
			var new_id = null;
			return [result.success, errors, new_id];
		}
	});
}
</script>
</body>
</html>
